const webpack = require('webpack')
const { resolve } = require('path')
const testPlugin = require('./plugins/test-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require('extract-text-webpack-plugin')
const UglifyjsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 入口文件
  entry: {
    './js/app': resolve(__dirname, './index.js')
  },
  // 输出文件
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].js',
    // 指定资源根目录
    publicPath: ''
  },
  resolve: {
    // 自动填充后缀名
    extensions: ['.js'],
    // 路径别名
    alias: {
      '~': resolve(__dirname)
    },
    // 自定义模块路径
    modules: ['node_modules', resolve(__dirname, 'modules')]
  },
  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    port: 9000,
    // 开启模块热替换
    hot: true
  },
  module: {
    rules: [{
      test: /\.md$/,
      use: [{
        loader: 'html-loader'
      }, {
        loader: 'markdown-loader'
      }]
    }, {
      test: /\.css$/,
      use: extractTextPlugin.extract(['css-loader'])
    }]
  },
  plugins: [
    // 模块热替换插件
    new webpack.HotModuleReplacementPlugin(),
    // 模板生成插件
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: resolve(__dirname, 'html.html'),
      inject: true,
      chunk: [
        'bundle.[hash].js'
      ]
    }),
    // 样式提取插件
    new extractTextPlugin({
      filename: (getPath) => {
        return getPath('./css/[name].css').replace('./js/', '')
      }
    }),
    new UglifyjsPlugin()
  ]
}